<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>个人中心</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <style>
            body{
                margin:0;
                padding:0;
                font-size:14px;
                text-decoration:none;
            }
            .box{
                width:100%;
                margin: auto;
                overflow: hidden;
            }
            .home_top {
                position: relative;
                width: 100%;
                height: 135px;
                text-align: center;
                padding-top:24px;
            }
            .home_top:after {
                width: 140%;
                height: 135px;
                position: absolute;
                left: -20%;
                top: 0;
                z-index: -1;
                content: '';
                border-radius: 0 0 50% 50%;
                background:linear-gradient(#3a9cf3,#0D5ABC);
            }
            .portrait_div{
                width:45px;
                height:45px;
                padding:3px;
                margin:0 auto;
                background:#FFFFFF;
                border-radius:5px;
            }
            .portrait_div img{
                width:100%;
            }
            .header_name{
                color:#ffffff;
                font-size:16px;
            }
            .input_text{
                width:100%;
                border:none;
                text-align:right;
                outline:none;
            }
            .user_info_div{
                border-bottom:1px solid #ececec;
                padding:15px 10px 15px 10px;
            }
            .user_info_title_span{
                float:left;
                vertical-align:middle;
                width:20%;
            }
            .user_info_div_div{
                float:left;
                vertical-align:middle;
                width:80%;
            }
            .user_info_title_span span{
                width:18px;
                height:18px;
                display:inline-block;
                vertical-align:middle;
                text-align:center;
            }
            .user_info_title_span span img{
                height:100%;
            }
            .user_info_div:last-child{
                border-bottom:none;
            }
            .logo_out{
                width:75px;
                text-align:center;
                margin:0 auto;
                position:fixed;
                bottom:50px;
                left:0;
                right:0;
            }
            .logo_out img{
                width:24px;
            }
            .logo_out p{
                color: rgb(13, 97, 203);
                margin:5px 0;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div class="home_top">
                <div class="portrait_div"><img src="images/portrait.png"></div>
                <p class="header_name">张警官</p>
            </div>
        </div>
        <div style="width:100%;">
            <div class="user_info_div">
                <span class="user_info_title_span">
                    <span><img src="images/jingh.png"></span>&nbsp;&nbsp;姓名：
                </span>
                <div class="user_info_div_div">
                    <input type="text" class="input_text" name="" value="" placeholder="请输入" autocomplete="off">
                </div>
                <div style="clear:both;"></div>
            </div>

            <div class="user_info_div">
                <span class="user_info_title_span">
                    <span><img src="images/bum.png"></span>&nbsp;&nbsp;部门：
                </span>
                <div class="user_info_div_div">
                    <input type="text" class="input_text" name="" value="" placeholder="请输入" autocomplete="off">
                </div>
                <div style="clear:both;"></div>
            </div>

            <div class="user_info_div">
                <span class="user_info_title_span" style="width:30%;">
                    <span><img style="width:100%;" src="images/phone.png"></span>&nbsp;&nbsp;联系电话：
                </span>
                <div class="user_info_div_div" style="width:70%;">
                    <input type="text" class="input_text" name="" value="" placeholder="请输入" autocomplete="off">
                </div>
                <div style="clear:both;"></div>
            </div>

            <div class="user_info_div">
                <span class="user_info_title_span" style="width:30%;">
                    <span><img src="images/pass.png"></span>&nbsp;&nbsp;修改密码：
                </span>
                <div class="user_info_div_div" style="width:70%;">
                    <span style="float:right;width:35px;text-align:right;">></span>
                </div>
                <div style="clear:both;"></div>
            </div>
        </div>
        <div class="logo_out">
            <img src="images/out.png">
            <p>退出登录</p>
        </div>
    </body>
</html>